import React, {useContext, useEffect, useState} from 'react';
import {Box, Card, CardContent, CardHeader, Chip, IconButton, Stack, Typography} from "@mui/material";

import CircularProgress from "@mui/material/CircularProgress";
import RefreshIcon from "@mui/icons-material/Refresh";

import {scheduleStatus} from "../../api/lesson/lesson-schedule";
import {manualSchedule, MyContext} from "../../menu";
import {CheckCircleOutline} from "@mui/icons-material";

const Line = ({thisWeek, values, goto}) =>
    <Stack spacing={2} direction="row" alignItems="center">
        <Typography sx={{whiteSpace: "nowrap"}}>{thisWeek ? "本周" : "下周"}</Typography>
        <Box sx={{display: "flex", flexWrap: "wrap", gap: 1, alignItems: "center"}}>
            {values.length === 0 && <Chip label="还早"/>}
            {values.map(e =>
                <Chip key={e.id} label={e.classGroup} color={e.published ? "default" : "primary"}
                      icon={e.published ? <CheckCircleOutline/> : null}
                      onClick={e.published ? null : goto}
                />
            )}
        </Box>
    </Stack>


function LessonScheduleStatus() {

    const {handleMenuClick} = useContext(MyContext);

    const [loading, setLoading] = useState(false);
    const [values, setValues] = React.useState([]);

    function load() {
        setLoading(true);
        scheduleStatus().then(data => {
            setValues(data);
            setLoading(false);
        });
    }

    function goto() {
        handleMenuClick(manualSchedule);
    }

    useEffect(() => {
        load();
    }, []);

    return (
        <Card raised sx={{padding: 2, boxSizing: 'border-box', width: '100%'}}>
            <CardHeader
                title={
                    <Stack direction="row" alignItems="center" spacing={1}>
                        <Typography variant="h5">课程编排</Typography>
                        {loading && <CircularProgress color="inherit" size={24}/>}
                    </Stack>}
                action={
                    <IconButton onClick={load}><RefreshIcon/></IconButton>
                }/>
            <CardContent>
                <Stack spacing={2}>
                    <Line thisWeek={true} values={values.filter(e => e.thisWeek)} goto={goto}/>
                    <Line thisWeek={false} values={values.filter(e => !e.thisWeek)} goto={goto}/>
                </Stack>
            </CardContent>
        </Card>
    );
}

export default LessonScheduleStatus;
